<template>
    <div class="dashboard-editor-container" style="background-color: #f0f2f5;min-height: calc(100vh - 93px);">
        <el-row :gutter="12">
            <el-col :sm="24" :xs="8" :md="8" :xl="8" :lg="8" :style="{ marginBottom: '12px' }">
                <chart-card title="用户人数" :total="purchasesOverviewData.userNum">
                    <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
                        <i class="el-icon-warning-outline" />
                    </el-tooltip>
                    <!-- <div>
                        <mini-area :data="purchasesOverviewData.purchasesList" />
                    </div> -->
                </chart-card>
            </el-col>
            <el-col :sm="24" :xs="8" :md="8" :xl="8" :lg="8" :style="{ marginBottom: '12px' }">
                <chart-card title="待上传作业" :total="purchasesOverviewData.createOrderPostNum">
                    <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
                        <i class="el-icon-warning-outline" />
                    </el-tooltip>
                    <!-- <div>
                        <MiniBar :data="purchasesOverviewData.newShoppings" />
                    </div> -->
                </chart-card>
            </el-col>
            <el-col :sm="24" :xs="8" :md="8" :xl="8" :lg="8" :style="{ marginBottom: '12px' }">
                <chart-card title="待审核订单" :total="purchasesOverviewData.waitOrderAuthNum">
                    <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
                        <i class="el-icon-warning-outline" />
                    </el-tooltip>
                    <!-- <div>
                        <MiniBar :data="shoppingOverviewData.newShoppings" />
                    </div> -->
                </chart-card>
            </el-col>
             <el-col :sm="24" :xs="8" :md="8" :xl="8" :lg="8" :style="{ marginBottom: '12px' }">
                <chart-card title="已打款作业" :total="purchasesOverviewData.moneyOrderNum">
                    <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
                        <i class="el-icon-warning-outline" />
                    </el-tooltip>
                    <!-- <div>
                        <MiniBar :data="purchasesOverviewData.newShoppings" />
                    </div> -->
                </chart-card>
            </el-col>
             <el-col :sm="24" :xs="8" :md="8" :xl="8" :lg="8" :style="{ marginBottom: '12px' }">
                <chart-card title="返款总金额" :total="'¥'+purchasesOverviewData.price">
                    <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
                        <i class="el-icon-warning-outline" />
                    </el-tooltip>
                    <!-- <div>
                        <MiniBar :data="purchasesOverviewData.newShoppings" />
                    </div> -->
                </chart-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import ChartCard from "@/components/ChartCard";
import Trend from "@/components/Trend";
import MiniArea from "@/components/MiniArea";
import MiniBar from "@/components/MiniBar";
import MiniProgress from "@/components/MiniProgress";
import RankList from "@/components/RankList/index";
import Bar from "@/components/Bar.vue";

import PieChart from "./components/PieChart";

import MyChart from "./components/MyChart";

import echarts from "echarts";
require('echarts/theme/macarons')
import resize from './components/mixins/resize'
import comment from "@/components/MyComment";

import {
    serviceOrderList,
    getOrderInfo
} from "@/api/dashboard/statistical";
import { putUseOrder } from '@/api/user'
export default {
    mixins: [resize],
    name: "DashboardAdmin",
    components: {
        ChartCard,
        Trend,
        MiniArea,
        MiniBar,
        MiniProgress,
        Bar,
        PieChart,
        MyChart,
        comment,
    },
    data () {
        return {
            // 龚华尧 首页统计数据
            purchasesOverviewData: {},
            shoppingOverviewData: {},
            visitsOverviewData: {},
            activationOverviewData: {},
            childAgeList: [],
            serviceOrderList: []
        };
    },
    created () {
        setTimeout(_ => {
            this.getOverviewData();
        }, 600)

    },
    methods: {
        formatDate (time) {
            let date = new Date(time).valueOf();
            let now = new Date();
            let year = new Date(time).getFullYear().toString().padStart(2, '0');
            let mon = (new Date(time).getMonth() + 1).toString().padStart(2, '0');
            let timeDate = new Date(time).getDate()
            let day = timeDate.toString().padStart(2, '0');
            let h = new Date(time).getHours().toString().padStart(2, '0');
            let m = new Date(time).getMinutes().toString().padStart(2, '0');
            let s = new Date(time).getSeconds().toString().padStart(2, '0');
            return `${year}-${mon}-${day} ${h}:${m}:${s}`
        },
        // 核销
        handlePut (row) {
            // console.log(row)
            this.$confirm('是否对核销该笔订单', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                putUseOrder(row.orderId, {
                    orderId: row.orderId,
                    usedAt: this.formatDate(new Date())
                }).then(res => {
                    this.$message.success(res.msg);
                    if (res.code == 200) {
                        serviceOrderList().then(res => {
                            this.serviceOrderList = res.data.list
                        })
                    }

                })
            })
        },
        getOverviewData () {
            getOrderInfo().then((res) => {
                this.purchasesOverviewData = res.data;
            });
            // serviceOrder().then((response) => {
            //     this.shoppingOverviewData = response.data;
            // });
            // vipUser().then((response) => {
            //     this.visitsOverviewData = response.data;
            // });
            // serviceOrderList().then(res => {
            //     this.serviceOrderList = res.data.list
            // })
            // getActivationOverview().then((response) => {
            //     this.activationOverviewData = response.data;
            // });

        },
    },
};
</script>

<style lang="scss" scoped>
.top5 {
    margin-top: 10px;
}
.item {
    border-radius: 8px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    min-height: 200px;
    padding: 20px;
    box-sizing: border-box;
}
.dashboard-editor-container {
    padding: 12px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
        position: absolute;
        top: 0;
        border: 0;
        right: 0;
    }

    .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
    }
}

::v-deep .el-tabs__item {
    padding-left: 16px !important;
    height: 50px;
    line-height: 50px;
}

@media (max-width: 1024px) {
    .chart-wrapper {
        padding: 8px;
    }
}
</style>
